<!DOCTYPE html>
<html>
<head>
	<title>试题列表</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
	<style>
		*{
			margin:0;
			padding:0;
		}

		body{
			font-family: "Microsoft YaHei";
		}

		.wrap{
			width:1000px;
			margin:0 auto;
			padding:20px 0;
		}

		.wrap h2{
			text-align: center;
			margin-bottom:20px;
		}

		ul{
			list-style: none;
		}

		.subject-list .title{
			margin-top: 15px;
		}

		.subject-list li{
			border-bottom: 1px #ddd solid;
		}

		.option-list p{
			cursor:pointer;
			color:#5c5c5c;
		}

		.option-list p,.answer{
			margin-top: 10px;
			padding-left: 20px;
		}

		.answer span{
			font-size: 20px;
			color: red;
		}

		#result{
			color: red;
			font-size: 14px;
			margin-left: 10px;
		}

		.sub-title2{
			margin: 20px 0;
		}

		.q_answer{
			margin-top: 10px;
		}

		.q_answer textarea{
			width:500px;
		}

		.quest-item{
			margin-top: 10px;
		}

		.q_answer:after{
			display: block;
			content:" ";
			height: 0;
			overflow: hidden;
			clear:both;
		}

		.q_answer p,.q_answer textarea{
			float: left;
		}

		#release{
			margin: 20px auto;
		}

		.qust-title{
			line-height: 24px;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<h2>试题列表</h2>
		
		<h3>选择题 <span style="color:#636363; font-size:16px;">(每道3分)</span></h3>
		<ul class="subject-list">
			{% for select in selects %}
			<li>
				<h4 class="title">{{select.as_title | safe}} 
					{% if select.isMulit == True %}
						<span>(不定项)</span>
					{% endif %}
				</h4>
				<div class="option-list">
					{% for option in select.options %}
						<p>{{option}}</p>
					{% endfor %}
				</div>
				<p class="answer">答案: <span data-id="{{select.id}}" data-mulit="{{select.isMulit}}"></span></p>
			</li>
			{% endfor %}
		</ul>

		<h3 class="sub-title2">问答题 <span style="color:#636363; font-size:16px;">(1-7每道5分 第8道10分)</span></h3>
		<div class="questions">
			{% for question in questions %}
			<div class="quest-item">
				<h4 class="qust-title">
					{{question.as_title | safe}} 
				</h4>
				<div class="q_answer">
					<p>回答：</p><textarea  class="form-control" rows="3" data-id="{{question.id}}"></textarea>
				</div>
			</div>
			{% endfor %}
		</div>

		<button id="release" class="btn btn-primary">提 交</button><span id="result"></span>
	</div>

	<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
	<script>

		var oList = $(".option-list");
		
		oList.on("click","p",function(e){

			var first = this.innerHTML[0];
			var space = $(this).parent().next().find("span");
			var isMulit = space.attr("data-mulit").toLowerCase();
			var html;
			
			if(isMulit == "false"){
				space.html(first);
			}else{
				if(space.html().indexOf(first) == -1){
					html = space.html() + first;
				}else{
					html = space.html().replace(first,"");
				}

				html = html.split("").sort().join("").trim();

				space.html(html);
			}
		});

		$("#release").click(function(){

			var isRelease = window.confirm("提交后无法修改，不能重复提交！确定提交吗？")

			if(!isRelease){
				return false;
			}

			//选择题提交
			var result = {};

			$.each($(".answer span"),function(i,e){
				result[$(e).attr("data-id")] = $(e).html();
			})
			var data = {
				list : JSON.stringify(result)
			}
			$.ajax({
				url : "/figure/{{period}}/{{current_user.username}}",
				type : "POST",
				data : data,
				success : function(res){
					if(res != "不能重复提交"){
						res = "你答对了" + res + "题";
					}

					$("#result").html(res);

					alert(res);
				}
			})

			//问答题
			var q_res = {};

			$.each($(".q_answer textarea"),function(i,e){
				q_res[$(e).attr("data-id")] = $(e).val().replace(/\n/g,"<br>");
			})

			var data = {
				list : JSON.stringify(q_res)
			}

			$.ajax({
				url : "/figure_quest/{{period}}/{{current_user.username}}",
				type : "POST",
				data : data,
				success : function(res){
					//console.log(res);
				}
			})

		})

	</script>
</body>
</html>